<script setup>
import {ref} from "vue";
import axios from "axios";
import Router from "@/router/index.js";

const personBean = ref({})
const id = ref(0)
const save = () => {
  console.log(personBean.value)
  axios.post(`/api/update`,{...personBean.value,id:id.value}).then((res) => {
    console.log("res", res)
  })
}
const toInsertPage=()=>{
  Router.push('/')
}
</script>
<template>
  <div style="width: 50%; height: 26%;display: flex;
 margin-top: 20%;
padding: 1%;
box-shadow: rgba(140,131,131,0.32) 5px 5px 5px ;
background-color: rgba(220,217,217,0.4);
  align-items: center; flex-direction: column">
    <h3>修改信息</h3>
    <div style="margin-top: 2%">
      <label> 姓名:</label>
      <input v-model="personBean.name" type="text">
      <label> 年龄:</label>
      <input v-model="personBean.age" type="text">
    </div>
    <div style="margin-top: 2%;">
      <label> 性别:</label>
      <input v-model="personBean.gender" type="text">
      <label style=""> 地址:</label>
      <input v-model="personBean.address" type="text">
    </div>
    <div style="margin-top: 2%;">
      <label> id:</label>
      <input v-model="id" type="text"></input>
    </div>
    <div style="width: 60%;display: flex;flex-direction: row">
      <div style="margin-top: 2%;width: 100%;display: flex;justify-content: space-around">
        <button @click="save">提交</button>
        <button @click="personBean={},id=0">重置</button>
      </div>
    </div>
    <div style="width: 100%; display: flex;justify-content: end">
      <text @click="toInsertPage" style="color: red;text-decoration: underline;font-size: 10px">点击添加信息</text>
    </div>

  </div>
</template>
<style scoped>

</style>